<!-- 日常管理-班组配置 -->
<template>
    <div class="teamConfig_daily">
        <div class="common_step">
            <div class="common_title">
                <div class="breadcrumb">
                    <div class="breadcrumb__item breadcrumb__item--center" @click="goBack()">排班管理</div>
                    <div class="breadcrumb__item">/</div>
                    <div class="breadcrumb__item breadcrumb__item--center"> 班组配置</div>
                </div>
                <div class="breadcrumbBtn">
                    <div class="btn_ative" @click="goBack()">
                        <img class="operation_btn" src="@/assets/images/images_new/back_icon.png" alt="">
                        <span>返回</span>
                    </div>
                </div>
            </div>

        </div>
        <div class="config_content">
            <menuTree ref="menuTreeRef" @getCheckItem="getCheckItem"></menuTree>
            <div class="config_right">
                <div class="searchBar">
                    <div class="topWrapper">
                        <div class="left">
                            <el-form class="form" :model="searchData.params" label-position="left">
                                <el-form-item label="班组类别" v-if="checkItem.ckecked_item.level == 0">
                                    <el-input v-model.trim="searchData.params.name" placeholder="班组类别"></el-input>
                                </el-form-item>
                                <el-form-item label="班组名称" v-if="checkItem.ckecked_item.level == 1">
                                    <el-input v-model.trim="searchData.params.name" placeholder="班组名称"></el-input>
                                </el-form-item>
                                <el-form-item label="班组成员" v-if="checkItem.ckecked_item.level == 2">
                                    <el-input v-model.trim="searchData.params.name" placeholder="班组成员"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="right">
                            <div class="btn_bg" title="搜索" @click="searchList">
                                <img class="btn_icon search_icon" src="@/assets/images/images_new/search_icon.png"
                                    alt="">
                            </div>
                            <div class="btn_bg btn_bg2" title="清空" @click="empty">
                                <img class="btn_icon reset_icon" src="@/assets/images/images_new/reset_icon.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table">
                    <div class="btn">
                        <div class="btn_item" @click="showAddDialog">
                            <img class="btn_icon" src="@/assets/images/images_new/add_icon.png" alt="">
                            <span>新增</span>
                        </div>
                        <div class="btn_item" @click="delFn">
                            <img class="btn_icon" src="@/assets/images/images_new/del_icon.png" alt="">
                            <span>删除</span>
                        </div>
                    </div>
                    <div class="tableBg">
                        <el-table ref="tableRef" :data="state.tableData" style="width: 100%;" stripe empty-text='暂无数据'
                            :max-height="table_height" :scrollbar-always-on="true"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55" />
                            <el-table-column type="index" label="序号" :min-width="58" />
                            <template v-if="checkItem.ckecked_item.level == 0">
                                <el-table-column prop="name" label="班组类别"
                                    :min-width="flexWidth('name', state.tableData, '班组类别')" />
                            </template>
                            <template v-else-if="checkItem.ckecked_item.level == 1">
                                <el-table-column prop="name" label="班组名称"
                                    :min-width="flexWidth('name', state.tableData, '班组名称')" />
                                <el-table-column prop="usersName" label="班组组长"
                                    :min-width="flexWidth('usersName', state.tableData, '班组组长')" />
                            </template>
                            <template v-else>
                                <el-table-column prop="userName" label="班组成员"
                                    :min-width="flexWidth('userName', state.tableData, '班组成员')" />
                            </template>
                            <el-table-column label="操作" width="165" class-name="fixed_column" fixed="right"
                                v-if="checkItem.ckecked_item.level < 2">
                                <template #default="scope">
                                    <div class="btn_ative" title="编辑" @click="editDetails(scope.row)">
                                        <img class="operation_btn" src="@/assets/images/images_new/edit_icon.png"
                                            title="编辑" alt="">
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <!-- 分页组件 -->
                <div class="common_pagination">
                    <CommonPagination2 :pageNum="searchData.pageNum" :pageSize="searchData.pageSize" :pageTotal="total"
                        @pageFunc="pageFunc" @sizeChange="sizeChange"></CommonPagination2>
                </div>
            </div>
        </div>
        <teamConfig_addDialog :dialogVisible="dialogVisible" :type_dialog="type_dialog"
            :dialogParams="dialogParams.ruleForm" :checkItem="checkItem.ckecked_item" @closeDialog="closeDialog"
            @confirmDialog="confirmDialog">
        </teamConfig_addDialog>
    </div>
</template>

<script setup lang="ts">
import menuTree from './menuTree.vue';
import teamConfig_addDialog from './teamConfig_addDialog.vue';
import { flexWidth } from '@/utils/utils'
import { schedulingGroupQueryPage, schedulingGroupDel, queryMembersPage, delMembers } from "@/http/scheduling";
import CommonPagination2 from "@/components/commonPagination2.vue"

const router = useRouter();


const state = reactive({
    tableData: [] as any,
    delData: null as any
})

let table_height = ref(500);

//返回上一页
const goBack = () => {
    router.go(-1);
}

const form = reactive({
    name: ''
})

//查找
const searchList = () => {
    searchData.pageNum = 1;
    getList();
}

//清空
const empty = () => {
    searchData.params.name = "";
    searchData.pageNum = 1;
    getList();
}

let dialogVisible = ref(false);//是否打开新增编辑弹窗
let type_dialog = ref("");//add 新增 edit 编辑

//关闭弹窗
const closeDialog = () => {
    dialogVisible.value = false;
}

//打开新增弹窗
const showAddDialog = () => {
    dialogVisible.value = true;
    type_dialog.value = 'add';
    dialogParams.ruleForm = {};
}

const delFn = () => {
    if (!state.delData || state.delData.length == 0) {
        return;
    }
    //@ts-ignore 取消单行ts验证
    ElMessageBox.confirm(
        '确定删除吗?',
        '删除确认',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'none',
            showClose: false
        }
    ).then(() => {
        if (checkItem.ckecked_item.level < 2) {
            delGroup();
        } else {
            del_Members();
        }
    }).catch(() => {

    })
}
//删除
const delGroup = () => {
    let params = {
        ids: state.delData
    }
    schedulingGroupDel(params).then(res => {
        ElMessage({
            message: '操作成功!',
            type: 'success',
        })
    })
    searchList();
    menuTreeRef.value?.getTreeList();
}

const del_Members =()=>{
    let params = {
        ids: state.delData
    }
    delMembers(params).then(res => {
        ElMessage({
            message: '操作成功!',
            type: 'success',
        })
    })
    searchList();
    menuTreeRef.value?.getTreeList();
}

//选择项改变事件
const handleSelectionChange = (val: any) => {
    let list = [] as Array<string>;
    if (val) {
        val.forEach((item: any) => {
            list.push(item.id);
        })
    }
    state.delData = list
    // console.log('multipleSelection',multipleSelection.list);
}

//点击编辑传给dialog的数据
let dialogParams = reactive({
    ruleForm: {}
})

//编辑
const editDetails = (row: any) => {
    dialogVisible.value = true;
    type_dialog.value = 'edit';
    dialogParams.ruleForm = row;
}

let checkItem = reactive({
    ckecked_item: {} as any //左侧树形结构选中的项
})

let menuTreeRef = ref<any>(null);

//获取当前选中的左侧栏
const getCheckItem = (ckecked_item: any) => {
    console.log('ckecked_item', ckecked_item);
    if (!checkItem.ckecked_item.id || checkItem.ckecked_item.id != ckecked_item.id) {
        checkItem.ckecked_item = ckecked_item;
        searchData.params.id = ckecked_item.id;
        getList();
    }
}

let searchData = reactive({
    pageNum: 1,
    pageSize: 10,
    params: {
        id: 0,
        name: ''
    }
})

const getList = () => {
    if (checkItem.ckecked_item.level < 2) {
        getList_group();//排班类别/班组
    } else {
        getList_members();//班组成员
    }
}
let total = ref(0);//总页数

//获取排班类别/班组分页列表
const getList_group = () => {
    schedulingGroupQueryPage(searchData).then((res: any) => {
        if (res && res.result && res.result.records) {
            state.tableData = res.result.records;
            total.value = res.result.total;
            state.tableData.forEach((item: any, index: number) => {
                let usersName = "";
                if (item.userList && item.userList.length > 0) {
                    item.userList.forEach((item2: any, index2: number) => {
                        usersName += index2 == 0 ? item2.userName : '、' + item2.userName;
                    })
                }
                state.tableData[index].usersName = usersName;
            })
        }
    })
}

//获取班组成员分页查询
const getList_members = () => {
    queryMembersPage(searchData).then((res: any) => {
        if (res && res.result && res.result.records) {
            state.tableData = res.result.records;
            total.value = res.result.total;
        }
    })
}

// getList();

//新增编辑成功,更新列表
const confirmDialog = () => {
    dialogVisible.value = false;
    getList();
    menuTreeRef.value?.getTreeList();
}

//页数改变事件(上一页,下一页,跳转到某一页)
const pageFunc = (pageNum: number) => {
    // console.log('pageNum',pageNum);
    searchData.pageNum = pageNum;
    getList();
}

//每页条数改变
const sizeChange = (pageSize: number) => {
    searchData.pageSize = pageSize;
    getList();
}

</script>

<style lang="scss" scoped>
.teamConfig_daily {
    height: 100%;
    width: 100%;
    min-height: 0;
    padding: 0 15px;
    background-color: #e5e5e5;
    display: flex;
    flex-direction: column;

    .common_step {
        height: 85px;

        // padding: 0 50px 15px 40px;
        .common_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 85px;
            background: rgb(255, 255, 255);
            border-radius: 0px 0px 8px 8px;
            padding-left: 30px;

            .breadcrumb {
                width: 320px;
                height: 38px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 10px;
                border: 1px solid rgba(0, 0, 0, 0.05);
                font-size: 16px;
                font-weight: 400;

                .breadcrumb__item {
                    display: flex;
                    align-items: center;

                    &:first-child {
                        cursor: pointer;
                        color: rgb(151, 151, 151);
                    }
                }

                .breadcrumb__item--center {
                    flex: 1;
                    justify-content: center;
                }
            }

            .breadcrumbBtn {
                margin-right: 42.5px;
                display: flex;

                .btn_ative {
                    width: auto;
                    height: 35px;
                    line-height: 35px;
                    cursor: pointer;
                    display: inline-block;
                    margin-right: 18px;
                    display: flex;
                    align-items: center;
                    color: #353535;
                    font-size: 14px;
                    padding: 0 8px;

                    &:last-child {
                        margin-right: 0;
                    }

                    &:hover {
                        background: rgba(0, 0, 0, 0.1);
                        border-radius: 2px;
                    }

                    .operation_btn {
                        height: 20px;
                        margin-right: 7px;
                    }
                }

            }
        }



    }

    .config_content {
        flex: 1;
        min-height: 0;
        padding-top: 20px;
        display: flex;

        .config_right {
            flex: 1;
            min-width: 0;
            padding-left: 19px;
            position: relative;

            .searchBar {
                background-color: #fff;
                border-radius: 8px;
                padding: 20px 28px 20px 30px;
                height: 72px;

                .topWrapper {
                    width: 100%;
                    display: flex;
                    // justify-content: space-between;
                    // padding-bottom: 15px;
                    // border-bottom: 1px solid rgba(112, 105, 95, 0.2);
                    // margin-bottom: 29px;
                    flex-wrap: wrap;

                    .left {
                        flex: 1;

                        .el-form {
                            display: flex;
                            flex-wrap: wrap;

                            .el-form-item {

                                :deep(.select-trigger) {
                                    .el-input {
                                        width: 100%;
                                    }
                                }
                            }
                        }
                    }


                    .right {
                        width: 87px;
                        height: 32px;
                        flex-shrink: 0;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        .btn_bg {

                            height: 35px;
                            width: 35px;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            &:hover {
                                background: rgba(0, 0, 0, 0.1);
                                border-radius: 2px;
                            }

                            &.btn_bg2 {
                                margin-left: 17px;
                            }

                            .search_icon {
                                width: 21px;
                                cursor: pointer;
                            }

                            .reset_icon {
                                width: 20px;
                                cursor: pointer;
                            }
                        }


                    }
                }
            }

            .table {
                height: calc(100% - 72px);

                .btn {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    height: 40px;
                    padding-right: 25px;
                    color: rgb(112, 105, 95);
                    font-size: 14px;

                    .btn_item {
                        display: flex;
                        align-items: center;
                        margin-left: 10px;
                        cursor: pointer;
                        height: 28px;
                        line-height: 28px;
                        padding: 0 10px 0 8px;

                        &:hover {
                            background: rgba(0, 0, 0, 0.1);
                            border-radius: 2px;
                        }

                        .btn_icon {
                            width: 18px;
                            margin-right: 6px;
                        }
                    }
                }

                .tableBg {
                    background-color: #fff;
                    height: calc(100% - 40px);
                    border-radius: 8px;

                    .btn_ative {
                        width: 35px;
                        height: 35px;
                        line-height: 35px;
                        cursor: pointer;
                        display: inline-block;
                        margin-right: 10px;
                        text-align: center;
                        margin-top: 7.5px;
                        padding-top: 5px;

                        &:last-child {
                            margin-right: 0;
                        }

                        &:hover {
                            background: rgba(0, 0, 0, 0.1);
                            border-radius: 2px;
                        }

                        .operation_btn {
                            height: 20px;

                        }
                    }

                }
            }

            .common_pagination {
                position: absolute;
                right: 35px;
                bottom: 40px;
            }
        }
    }
}
</style>
